<template>
  <div class="menu">
    <el-container>
      <el-main>
        <el-carousel :interval="4000" type="card" height="200px">
          <el-carousel-item v-for="item in 3" :key="item"></el-carousel-item>
        </el-carousel>
        <div id="d1">
          <el-select @change="showData" v-model="value" placeholder="请选择商品类别">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
          <div style="margin-top: 15px;" id="e1">
            <el-input
              placeholder="请输入内容"
              v-model="input3"
              class="input-with-select"
              @change="find"
            ></el-input>
          </div>
        </div>
        <div id="d2">
          <ul>
            <li
              v-for="trade in tradeDatas.slice((currentPage-1)*15,(currentPage)*15)"
              :key="trade.tradeID"
              @click="godisdetails(trade.tradeID)"
            >
              <img :src="getCard(trade.images)" alt />
              <span>{{trade.tradeName}}</span>
            </li>
          </ul>
          <div class="block">
            <el-pagination
              layout="prev, pager, next"
              :total="allpages"
              :page-size="15"
              @current-change="current_change"
            ></el-pagination>
          </div>
        </div>
      </el-main>
      <el-footer>Footer</el-footer>
    </el-container>
  </div>
</template>
<style scoped>
.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  width: 80%;
  margin: 0 auto;
}
.el-footer {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
}
.el-carousel__item:nth-child(2n) {
  background: url("../assets/menuImages/head2.jpg") no-repeat;
  background-size: cover;
}

.el-carousel__item:nth-child(2n + 1) {
  background: url("../assets/menuImages/head3.jpg") no-repeat;
  background-size: cover;
}
.el-carousel__item:nth-child(3n) {
  background: url("../assets/menuImages/head4.jpg") no-repeat;
  background-size: cover;
}
#d1 {
  width: 100%;
  height: 80px;
}
#d1 .el-select {
  float: left;
  margin-left: 30px;
}
#d1 .el-input {
  float: right;
  width: 300px;
  height: 50px;
  margin-right: 3px;
}
.el-icon-arrow-down {
  font-size: 12px;
}
#d2 {
  width: 100%;
}
#d2 ul {
  width: 100%;
  height: 777px;
  margin: 0 auto;
}
#d2 ul li {
  width: 18%;
  height: 33%;
  list-style: none;
  float: left;
  margin-left: 20px;
  margin-top: 30px;
}
#d2 ul li img {
  width: 100%;
  height: 80%;
  border-radius: 10px;
}
#d2 ul li span {
  text-align: center;
  color: #777;
  margin-top: 5px;
}
#e1 {
  width: 450px;
  height: 40px;
  float: right;
}
#e1 .el-input {
  width: 375px;
  height: 40px;
  float: left;
}
.el-pagination {
  margin-top: 100px;
  clear: both;
}
.el-drawer {
  height: 70%;
}
.el-drawer .el-button {
  width: 100%;
  height: 50px;
}
#spans {
  width: 100%;
  height: 70%;
}
</style>
<script>
import axios from "axios";
export default {
  data() {
    return {
      info: "",
      options: [
        {
          value: "10",
          label: "雪糕"
        },
        {
          value: "20",
          label: "巧克力"
        },
        {
          value: "30",
          label: "饮品"
        },
        {
          value: "40",
          label: "冰淇淋"
        }
      ],
      value: "",
      input3: "",
      trades: [],
      allpages: null,
      currentPage: 1,
      tradeID :"",

    };
  },
  created() {
    this.$axios
      .get("http://localhost:3000/menu/menu")
      .then(res => {
        console.log("查询结果" + res.data.data);
        this.trades = res.data.data;
        this.allpages = res.data.data.length;
      })
      .catch(err => {
        console.log(err);
      });
  },
  computed: {
    tradeDatas() {
      let goods = []
      let temp = [];
      console.log('aaa',this.info)
      if (this.info.length == 0 && this.input3 == "") {
        return this.trades;
      }
      if (this.info.length == 0 && this.input3 != "") {
        for (let i = 0; i < this.trades.length; i++) {
          if (this.trades[i].tradeName == this.input3) {
            goods.push(this.trades[i]);
          }
        }return goods;
      }
      
      if(this.info != "" && this.input3 == ""){
         for (var i = 0; i < this.trades.length; i++) {
        if (this.trades[i].classID == this.info) {
          temp.push(this.trades[i]);
        }
       }
       return temp
      }
      for (var i = 0; i < this.trades.length; i++) {
        if (this.trades[i].classID == this.info) {
          temp.push(this.trades[i]);
          
        }
      }
      for (let i = 0; i < temp.length; i++) {
            if (temp[i].tradeName == this.input3) {
              goods.push(temp[i]);
            }
          }
      return goods
    }
  },
  methods: {
    getCard(card) {
      let path = "http://localhost:3000/upload/" + card;
      console.log(path);
      return path;
    },
    Class(value) {
      console.log(value);
    },
    current_change(currentPage) {
      this.currentPage = currentPage;
    },
    showData(info) {
      this.info = info;
    },
    find(input3) {
      console.log(input3);
      this.input3 = input3;
    },
    godisdetails(tradeID){
      // this.$axios.get("http://localhost:3000/menu/menuID?tradeID="+this.tradeID)
      // .then(res => {
      //   console.log("查询结果:",this.tradeID)
      // })
      // tradeID = this.tradeID
      this.$router.push('/index/menudisdetails/'+tradeID)
    }
  }
};
</script>

